<!DOCTYPE html>
<head>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" type="text/css">
</head>
<body>
    <!-- 留言区域 -->
    <div class="card-body">
        <h3>我的留言</h3>
        <div class="guestbook">
        </div>
    </div>
   <!-- 发布留言 -->
<div class="container mt-4">
    <div class="card">
      <div class="card-header">
        我的信息从这里发布
      </div>
      <div class="card-body">
        <form id="guest-form">
          <div class="form-group">
            <label for="message">要发布的内容</label>
            <textarea class="form-control" id="message" rows="3" required></textarea>
          </div>
          <button type="submit" class="btn btn-primary">发布留言</button>
        </form>
      </div>
    </div>
  </div>
  <script>
    $(function(){
        $('#guest-form').on('submit',function(e){
            e.preventDefault();
            var message=$("#message").val();
            $("#message").val();
            var messageElem=$('<div>').text(message);
                $(".guestbook").append(messageElem);
        })
    })
  </script>
</body>
</html>